<template>
  <!--
    核心功能:预览,限制图片上传数量,删除,上传,进度条
  :file-list  :文件列表
  :on-preview :图片预览
  action      :文件上传时的服务器提交地址,我们当前项目自定义上传方式
  limit       :限制上传图片的数量
  :on-remove  :图片删除
  http-request:自定义上传方式
  on-change   :上传成功或上传失败时触发
  before-upload:上传前的校验
 -->
  <div class="upload-box">
    <el-upload
      :on-preview="preview"
      :file-list="fileList"
      list-type="picture-card"
      action=""
      :class="{disabled: fileComputed }"
      :on-remove="handleRemove"
      :http-request="handleRequest"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <!--  -->
      <i class="el-icon-plus" />
    </el-upload>

    <!--
       图片预览弹窗
       sync:el-ui 组件封装好
    -->
    <el-dialog
      width="600px"
      top="8vh"
      title="图片预览"
      :visible.sync="showDialog"
    >
      <img width="100%" :src="imgUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(查看SDK文档)
const cos = new COS({
  SecretId: 'AKID0roTrxmJZYGgphIeN1SggZFhvtb34vYv', // 身份识别ID
  SecretKey: '92f2A1cy3sRkmY4JI1TfaFemeGchW4LN' // 身份秘钥
})
export default {
  name: 'Imageupload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [
        { url: '' },
        { url: '' }
      ],
      showDialog: false, // 控制显示弹层
      imgUrl: ''
    }
  },
  computed: {
    fileComputed() {
      // 设定一个计算属性 判断是否已经上传完了一张
      return this.fileList.length >= this.limit
    },
    fileSuccess() {
      // 判断所有文件的状态是否都成功
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    preview(file) {
      // 这里应该弹出一个层 层里是点击的图片地址
      this.imgUrl = file.url
      this.showDialog = true
    },
    handleRemove(file, fileList) {
      // file :删除的文件
      // fileList :页面结构上剩余的图片数据
      // this.fileList :数据层的图片数据(数组上的所有图片)
      // console.log(file, fileList, this.fileList)
      // 使用过滤器筛选出没有被删除的图片赋值给fileList渲染
      this.fileList = this.fileList.filter(item => item.uid !== file.uid) // 从data中移出对应项
    },

    // 添加文件, 用户选了就应该新增文件预览
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      // console.log(fileList)
      // console.log(fileList.length)
      this.fileList = [...fileList]
    },
    // 配置上传前的校验, 只要通过校验, 才能进行上传
    beforeUpload(file) {
      // 1. 限制文件类型 file.type
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.includes(file.type)) {
        this.$message.error('上传的图片格式, 必须是jpg, gif, bmp, png的格式!')
        return false
      }
      // 2. 限制文件大小 file.size
      if (file.size / 1024 / 1024 >= 5) {
        this.$message.error('上传头像过大, 超过了5M, 必须5M以内')
        return false
      }
      return true
    },
    // 自定义上传动作 有个参数 有个file对象
    handleRequest(obj) {
      // 要上传的文件状态改为upload
      const fileObj = this.fileList.find(item => item.uid === obj.file.uid)
      fileObj.status = 'uploading' // 找到上传的文件 改变状态
      // 进行上传操作
      console.log(obj.file)
      // console.log(params.file)
      // if (obj.file) {
      // 执行上传操作
      cos.putObject({
        Bucket: 'hrsaas-1312329988', /* 存储桶 */
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: obj.file.name, /* 文件名 */
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: obj.file, // 上传文件对象
        onProgress: (progressData) => { // 监听上传的进度
          console.log(JSON.stringify(progressData))
          fileObj.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        // console.log(err || data)
        if (err) return // 上传失败

        // 上传成功  obj.file.uid新上传头像的uid (找到符合条件的下标并返回该元素)
        // const fileObj = this.fileList.find(item => item.uid === obj.file.uid)
        // 更改图片状态:把成功的状态赋值给新上传的头像
        fileObj.status = 'success'
        // 更换地址路径:把云图片地址替换掉预览的地址 成功返回的data数据
        fileObj.url = 'https://' + data.Location
      })
      // }
    }
  }

}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none
    }
  }
}
</style>
